
<template>
  <div class="validator">
    <div 
      class="title"
    >
      Gtp validator 
    </div>

    <div class="source">
      <el-input 
        id="input-src" 
        v-model="gtp_string" 
        spellcheck="false" 
        :autosize="{minRows:10}"  
        type="textarea" 
        placeholder="Please input gtp string"
      />
    </div>

    <div class="actions">
      <el-button @click="validate">
        validate
      </el-button>
      <el-button @click="pretty_print">
        Pretty print
      </el-button>
      <el-button @click="clear">
        Clean Gtp 
      </el-button>
    </div>

    <div class="results">
      <div 
        id="validate-result"
        class="result" 
      >
        <el-alert 
          v-if="alert_shows_success"
          class="result" 
          title="Result" 
          type="success" 
          show-icon 
          center
          :closable="false"
          :description="validate_response" 
        />
        <el-alert 
          v-if="alert_shows_warning"
          class="result" 
          title="Error" 
          type="warning" 
          show-icon
          center
          :closable="false"
          :description="warning_result"  
        />
        <el-alert 
          v-if="alert_shows_error"
          class="result" 
          title="Fatal" 
          type="error"  
          show-icon 
          center
          :closable="false"
          :description="error_result" 
        />
      </div>

      <div 
        v-if="is_show_pretty_print_result"
        id="pretty-print-result" 
        class="result" 
      >
        <el-input 
          id="print-result" 
          v-model="pretty_print_string" 
          class="result" 
          spellcheck="false" 
          type="textarea" 
          :autosize="{minRows:4}" 
          placeholder="Show pretty print result here" 
        />
      </div>
    </div>
  </div>
</template>



<script lang='ts'>
import service from "./http"
import {Base64} from 'js-base64'

import iconv from 'iconv-lite'
//import encodings from 'iconv-lite/encodings';
//iconv.encodings = encodings


export default {
    data() {
        return {
            gtp_string: 'X01=GTP1.0,',

            pretty_print_string: '',
            validate_response:'',
            warning_result:'',
            error_result: '',

            alert_status: 0,

            alert_shows_success: true,
            alert_shows_error: false,
            alert_shows_warning : false,

            is_show_pretty_print_result: false,
        };
    },
    methods: {
        reset_alert(status) {
            switch(status) {
                case 0:
                    if(!this.alert_shows_success)
                        this.alert_shows_success = true;
                    if(this.alert_shows_warning)
                        this.alert_shows_warning = false;
                    if(this.alert_shows_error)
                        this.alert_shows_error = false;
                    break;
                case 1:
                    if (!this.alert_shows_success)
                        this.alert_shows_success = true;
                    if(this.alert_shows_warning)
                        this.alert_shows_warning = false;
                    if(this.alert_shows_error)
                        this.alert_shows_error = false;
                    break;
                case 2:
                    if(this.alert_shows_success)
                        this.alert_shows_success = false;
                    if(!this.alert_shows_warning)
                        this.alert_shows_warning = true;
                    if(this.alert_shows_error)
                        this.alert_shows_error = false;
                    break;
                case 3:
                    if(this.alert_shows_success)
                        this.alert_shows_success = false;
                    if(this.alert_shows_warning)
                        this.alert_shows_warning = false;
                    if(!this.alert_shows_error)
                        this.alert_shows_error = true;
                    break;
                default:
                    break;
            }
        },
        validate() {
            console.log("validate it....")

            if(this.is_show_pretty_print_result)
                this.is_show_pretty_print_result = false

            if(this.gtp_string.length == 0){
                this.validate_response = "Error: no input gtp string";
                return ;
            }

            const gtp_bytes = iconv.encode(this.gtp_string, "GBK");

            const method= "/gtplint/v1/gtp";
            const input_data = {
                "gtp":Base64.fromUint8Array(gtp_bytes)
            }
            console.log("method:["+method + "] json:[" + JSON.stringify(input_data) + "]");

            service.post(method, input_data)
                .then(response => {
                    const ok = response["success"];
                    if (ok) {
                        console.log("response, json:[" + JSON.stringify(response) + "]")
                        this.validate_response = "OK";
                        this.reset_alert(1);
                    } else {
                        this.warning_result = JSON.stringify(response.data);
                        this.reset_alert(2);
                    } 
                })
                .catch(error => {
                    console.error('Got an err:', error);
                    this.error_result = JSON.stringify(error);
                    this.reset_alert(3);
                })
        },
        clear() {
            this.is_show_pretty_print_result = false;

            this.gtp_string = 'X01=GTP1.0,';
            this.validate_response = '';
            this.warning_result = '';
            this.error_result = '';
            this.reset_alert(0);
        },
        pretty_print() {
            this.reset_alert(0);

            if(this.gtp_string.length == 0){
                this.validate_response = "Error: no input gtp string";
                return ;
            }
            const gtp_bytes = iconv.encode(this.gtp_string, "GBK");

            const method= "/gtplint/v1/gtp/pretty-print";
            const input_data = {
                "gtp":Base64.fromUint8Array(gtp_bytes)
            }
            console.log("method:["+method + "] json:[" + JSON.stringify(input_data) + "]");

            service.post(method, input_data)
                .then(response => {
                    const ok = response["success"];
                    if (ok){
                        console.log("response, json:[" + JSON.stringify(response) + "]")

                        const base64_decoded = Base64.toUint8Array(response.data.pretty_print)
                        this.pretty_print_string = iconv.decode(base64_decoded, "GBK")
                        this.reset_alert(1);
                        if(!this.is_show_pretty_print_result)
                            this.is_show_pretty_print_result = true;
                    } else {
                        this.warning_result = JSON.stringify(response.data);
                        this.reset_alert(2);
                        if(this.is_show_pretty_print_result)
                            this.is_show_pretty_print_result = false;
                    }
                })
                .catch(error => {
                    console.error('Got an err:', error);
                    this.error_result = JSON.stringify(error);
                    this.reset_alert(3);
                    if(this.is_show_pretty_print_result)
                        this.is_show_pretty_print_result = false;
                })
        }
    }
}
</script>


<style>
    .validator {
        min-width: 600px;
        display: flex;
        flex-direction: column;

        justify-content: flex-start;

        font-size: 1.3rem;
        border-radius: 8px;
        padding: 1rem .4rem; /*top right bottom left*/

        background-color:rgb(243, 242, 229);
    }
    .title {
        padding: 0.4rem;
        font-size:1.5rem;
    }

    .actions {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 1.2rem;
        width:80%;
        /*background-color: aqua;*/
    }

    .results {
        width:100%;
        /*border-radius: 8px;*/
        /*padding: 0.2rem .4rem; /*top right bottom left*/

        /*background-color:rgb(230, 223, 215);*/
    }

    .result {
        min-height: 80px;
    }

    button {
        width:100%;
        height: 40px; 

        font-size: 1.3rem;
        font-weight: 300;

        margin: 0.5rem 0.8rem 0.4rem auto;

        border-radius: 5px;
    }
</style>
